<!-- 资产概况 -->
<template>
  <div class=''>
    <el-row class="title">
      <span>基础数据</span>
    </el-row>
    <el-row class="card-title" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card @click.native="handleRoomDialog" class="card-title1 change">
          <div class="title_1">资产总数量</div>
          <div class="title_2">{{totals.count|format}}处</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="card-title2">
          <div class="title_1">资产总面积</div>
          <div class="title_3">{{totals.area|format}}平方米</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card @click.native="handleChartDialog" class="card-title3 change">
          <div class="title_1">合同总户数</div>
          <div class="title_4">{{totals.users|format}}户</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="card-title4">
          <div class="title_1">预计当年总收入</div>
          <div class="title_5">{{totals.earnings|formatMoney}}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="row_spacing" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(处)</span>
          <pie-chart v-if="JSON.stringify(assetNum)!='{}'" :pieData="assetNum" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(平方米)</span>
          <pie-chart v-if="JSON.stringify(assetArea)!='{}'" :pieData="assetArea" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(处)</span>
          <pie-chart v-if="JSON.stringify(assetStructure)!='{}'" :pieData="assetStructure" />
          <!-- <pie-chart v-if="JSON.stringify(assetType)!='{}'" :pieData="assetType" /> -->
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(处)</span>
          <radar v-if="JSON.stringify(assetType)!='{}'" :pieData="assetType" />
          <!-- <radar v-if="JSON.stringify(assetStructure)!='{}'" :pieData="assetStructure" /> -->
        </el-card>
      </el-col>
    </el-row>
    <el-row class="title">
      <span>数据分析</span>
    </el-row>
    <el-row :gutter="32">
      <el-card>
        <el-row :gutter="32" class="tools">
          <el-cascader size="mini" v-model="type" :options="typeOptions" :props="{ expandTrigger: 'hover' }" @change="selectTypeChange"></el-cascader>
          <el-select v-model="value" size="mini" @change="selectChange" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-radio-group @change="radioChange" v-model="radio" size="mini">
            <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
          <el-date-picker v-if="value==='1'" v-model="time" type="daterange" align="right" @change="dateChange" unlink-panels value-format="timestamp" size="mini" style="float:right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-row>
        <bar-chart v-if="JSON.stringify(barOptions)!='{}'&&value==='1'" :barData="barOptions"></bar-chart>
        <bar-chart2 v-if="JSON.stringify(barOptions2)!='{}'&&value==='2'" :barData="barOptions2"></bar-chart2>
        <bar-chart3 v-if="JSON.stringify(barOptions3)!='{}'&&value==='3'" :barData="barOptions3"></bar-chart3>
      </el-card>
    </el-row>
    <table-dialog :title="title" :dialogTableVisible.sync="dialogShow" :loading="loading" :tablePage="tablePage" :tableColumn="tableColumn" :tableData="tableData" @getPage="getPage"></table-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import PieChart2 from "../components/PieChart2";
import PieChart3 from "../components/PieChart3";
import BarChart from "../components/BarChart";
import BarChart2 from "../components/BarChart2";
import BarChart3 from "../components/BarChart3";
import TableDialog from "../components/TableDialog";
import { getRoomInfo, getChartInfoDetails } from "@/api/table";
import Radar from "../components/Radar";
import { pickerOptions, computeTime } from "@/utils/index";
import { format } from "path";
import { getTableColumn } from "@/utils/baseData";
import {
  getCount,
  getArea,
  getUsers,
  getEarning,
  getRoomProperty,
  getRoomArea,
  getDictionary,
  getStructure,
  getCountBar,
  getAreaBar,
  getChartBar,
  getEarningsBar,
  getPropertyBar,
  getRoomAreaBar,
  getStructureBar,
  getAssetsData
} from "@/api/charts";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    PieChart,
    PieChart2,
    PieChart3,
    Radar,
    BarChart,
    BarChart2,
    BarChart3,
    TableDialog
  },
  data() {
    //这里存放数据
    return {
      title: "资产列表",
      changeTable: 1,
      dialogShow: false,
      assetNum: {},
      assetArea: {},
      assetType: {},
      assetStructure: {},
      rentArea: {},
      vacancyArea: {},
      hire: {},
      rentNum: {},
      totals: {
        count: "",
        area: "",
        users: "",
        earnings: ""
      },
      time: [],
      radio: "一年",
      type: ["1"],
      barOptions: {},
      barOptions2: {},
      barOptions3: {},
      barCountData: {},
      interval: 0,
      radios: ["一月", "三月", "半年", "一年", "全部"],
      options: [
        {
          value: "1",
          label: "基础列表"
        },
        {
          value: "2",
          label: "二年同列"
        },
        {
          value: "3",
          label: "三年同列"
        }
      ],
      typeOptions: [
        // {
        //   value: "01",
        //   label: "综合统计",
        //   children: [
        //     {
        //       value: "1",
        //       label: "按资产数据"
        //     },
        //     {
        //       value: "2",
        //       label: "按资产面积"
        //     },
        //     {
        //       value: "3",
        //       label: "按合同户数"
        //     },
        //     {
        //       value: "4",
        //       label: "按月租金收入"
        //     }
        //   ]
        // },
        // {
        //   value: "02",
        //   label: "按资产类型(处)",
        //   children: [
        //     {
        //       value: "5",
        //       label: "住宅数量"
        //     },
        //     {
        //       value: "6",
        //       label: "营业数量"
        //     },
        //     {
        //       value: "7",
        //       label: "土地数量"
        //     }
        //   ]
        // },
        // {
        //   value: "03",
        //   label: "按资产类型(面积)",
        //   children: [
        //     {
        //       value: "8",
        //       label: "营业面积"
        //     },
        //     {
        //       value: "9",
        //       label: "土地面积"
        //     },
        //     {
        //       value: "10",
        //       label: "住宅房面积"
        //     }
        //   ]
        // },
        // {
        //   value: "04",
        //   label: "按资产结构(处)",
        //   children: [
        //     {
        //       value: "11",
        //       label: "砖木"
        //     },
        //     {
        //       value: "12",
        //       label: "砖混"
        //     },
        //     {
        //       value: "13",
        //       label: "框架"
        //     },
        //     {
        //       value: "14",
        //       label: "其他"
        //     },
        //     {
        //       value: "15",
        //       label: "钢结构"
        //     }
        //   ]
        // },
        {
          value: "1",
          label: "按资产数量"
        },
        {
          value: "2",
          label: "按资产面积"
        },
        {
          value: "3",
          label: "按合同户数"
        },
        {
          value: "4",
          label: "按月租金收入"
        },
        {
          value: "5",
          label: "按巡查处数"
        },
        {
          value: "6",
          label: "按隐患处数"
        },
        {
          value: "7",
          label: "正在整改处数"
        },
        ,
        {
          value: "8",
          label: "未整改处数"
        },
        {
          value: "9",
          label: "无隐患资产占比"
        },
        {
          value: "10",
          label: "隐患资产占比"
        },
        {
          value: "11",
          label: "本年已整改隐患占比"
        }
      ],
      tablePage: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      tableColumn: [],
      loading: false,
      pickerOptions: {
        shortcuts: pickerOptions
      },
      value: "1"
    };
  },
  //监听属性 类似于data概念
  computed: {},
  filters: {
    format(num) {
      var reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (num + "").replace(reg, "$&,");
    },
    formatMoney(num) {
      return (num / 1e4).toFixed(1) + "万元";
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initRoominfo() {
      this.loading = true;
      getRoomInfo(this.tablePage)
        .then(res => {
          this.tableData = res.data;
          this.tablePage.total = res.allCount;
          this.title = "资产列表";
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
        });
    },
    initChartInfo() {
      this.loading = true;
      getChartInfoDetails(this.tablePage)
        .then(res => {
          this.tableData = res.data;
          this.tablePage.total = res.allCount;
          this.title = "合同列表";
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
        });
    },
    getPage({ page, limit }) {
      this.tablePage.pageIndex = page;
      this.tablePage.pageSize = limit;
      if (this.changeTable === 1) {
        this.initRoominfo();
      } else if (this.changeTable === 2) {
        this.initChartInfo();
      }
    },
    change() {},
    updateOption() {
      //单列数据
      if (this.value === "1") {
        let start = (
          ((this.barCountData.date.length - 11) /
            this.barCountData.date.length) *
          100
        ).toFixed(2);
        this.barOptions = {
          dataZoom: [{ start: start }],
          xAxis: [{ data: this.barCountData.date }],
          legend: {
            data: [this.barCountData.data1.name]
          },
          series: [
            {
              name: this.barCountData.data1.name,
              data: this.barCountData.data1.value
            }
          ]
        };
      } else if (this.value === "2") {
        this.barOptions2 = {
          dataset: {
            source: this.barCountData.data1.value
          },
          series: [
            {
              name: this.barCountData.data1.value[0][1]
            },
            {
              name: this.barCountData.data1.value[0][2]
            }
          ]
        };
      }
      //多列数据
      else {
        this.barOptions3 = {
          dataset: {
            source: this.barCountData.data1.value
          },
          series: [
            {
              name: this.barCountData.data1.value[0][1]
            },
            {
              name: this.barCountData.data1.value[0][2]
            },
            {
              name: this.barCountData.data1.value[0][3]
            }
          ]
        };
      }
    },

    //下拉分列变化
    selectChange(value) {
      console.log("列数下拉项变化 ", value);
      let year = new Date().getFullYear();
      let start = computeTime(year, 1)[0];
      //防止接口报错
      // if (this.time[0] === start) {
      //   this.time = [];
      // }
      getAssetsData({
        name: this.type[0],
        column: value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    //下拉分类变化
    selectTypeChange(value) {
      console.log("分类变化的数据", value);
      getAssetsData({
        name: value[0],
        column: this.value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        //单列数据
        this.updateOption();
      });
    },
    //单选框事件
    radioChange(value) {
      console.log("单选框值 ", value);
      let start = 0;
      console.log("barOptions", this.barOptions);
      switch (value) {
        case "一月":
          this.barOptions.dataZoom[0].start = 100;
          break;
        case "三月":
          start = (
            ((this.barCountData.date.length - 2) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "半年":
          start = (
            ((this.barCountData.date.length - 5) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "一年":
          start = (
            ((this.barCountData.date.length - 11) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "全部":
          this.barOptions.dataZoom[0].start = 0;
          //防止过多年份 间隔显示11个月
          break;
        default:
          break;
      }
    },
    //时间切换
    dateChange(value) {
      console.log("时间项值 ", value);
      if (this.time === null) {
        this.time = [];
      }
      getAssetsData({
        name: this.type[0],
        column: this.value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    handleRoomDialog() {
      this.tablePage.pageIndex = 1;
      this.changeTable = 1;
      this.initRoominfo();
      this.tableColumn = getTableColumn("asset");
      this.dialogShow = true;
    },
    handleChartDialog() {
      this.changeTable = 2;
      this.tablePage.pageIndex = 1;
      this.initChartInfo();
      this.title = "合同列表";
      this.tableColumn = getTableColumn("chart");
      this.dialogShow = true;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let year = new Date().getFullYear();
    let start = computeTime(year, 1)[0];
    let end = computeTime(year, 12)[1];
    this.time = [start, end];
    getCount().then(res => {
      this.totals.count = res.count;
    });
    getArea().then(res => {
      this.totals.area = res.allCount;
    });
    getUsers().then(res => {
      this.totals.users = res.count;
    });
    getEarning().then(res => {
      this.totals.earnings = res.count;
    });
    getRoomProperty().then(res => {
      this.assetNum = {
        title: {
          text: "资产数量"
        },
        series: [
          {
            name: "资产数量",
            data: res
          }
        ]
      };
    });
    getRoomArea().then(res => {
      this.assetArea = {
        title: {
          text: "资产面积"
        },
        series: [
          {
            name: "资产面积",
            data: res
          }
        ]
      };
    });
    getStructure().then(res => {
      this.assetStructure = {
        title: {
          text: "资产结构"
        },
        series: [
          {
            name: "资产结构",
            data: res
          }
        ]
      };
    });
    getDictionary().then(res => {
      let newStructure = [];
      res.forEach(item => {
        newStructure.push(item.value);
      });
      let newData = [newStructure];
      console.log("newStructure", newData);
      let indicator = [
        { name: "保障性住房", max: 300 },
        { name: "行政事业单位办公用房", max: 100 },
        { name: "企业改制", max: 400 },
        { name: "直管公房", max: 300 },
        { name: "其它", max: 350 }
      ];
      let dataBJ = [[55, 9, 56, 0.46, 18, 6]];
      this.assetType = {
        title: {
          text: "资产分类"
        },
        radar: {
          indicator: res
        },
        series: [
          {
            data: [{ value: newStructure }]
          }
        ]
      };
    });
    getAssetsData({ name: "1", column: "1", time: this.time }).then(res => {
      this.barCountData = res;
      let start = (
        ((this.barCountData.date.length - 11) / this.barCountData.date.length) *
        100
      ).toFixed(2);
      this.barOptions = {
        dataZoom: [{ start: start }],
        xAxis: [{ data: res.date }],
        legend: {
          data: [res.data1.name]
        },
        series: [
          {
            name: res.data1.name,
            data: res.data1.value
          }
        ]
      };
    });
    // axios
    //   .all([
    //     getCount(),
    //     getArea(),
    //     getUsers(),
    //     getEarning(),
    //     getRoomProperty(),
    //     getRoomArea(),
    //     getDictionary(),
    //     getStructure(),
    //     getAssetsData({ name: "1", column: "1", time: this.time })
    //   ])
    //   .then(
    //     axios.spread(
    //       (
    //         count,
    //         area,
    //         users,
    //         earning,
    //         property,
    //         roomarea,
    //         dictionary,
    //         structure,
    //         propertybar
    //       ) => {
    //         this.totals.count = count.count;
    //         this.totals.area = area.allCount;
    //         this.totals.users = users.count;
    //         this.totals.earnings = earning.count;
    //         this.barCountData = propertybar;
    //         this.assetNum = {
    //           title: {
    //             text: "资产数量"
    //           },
    //           series: [
    //             {
    //               name: "资产数量",
    //               data: property
    //             }
    //           ]
    //         };
    //         this.assetArea = {
    //           title: {
    //             text: "资产面积"
    //           },
    //           series: [
    //             {
    //               name: "资产面积",
    //               data: roomarea
    //             }
    //           ]
    //         };
    //         this.assetType = {
    //           title: {
    //             text: "资产分类"
    //           },
    //           series: [
    //             {
    //               name: "资产分类",
    //               data: dictionary
    //             }
    //           ]
    //         };
    //         console.log("structure", structure);
    //         let newStructure = [];
    //         structure.forEach(item => {
    //           newStructure.push(item.value);
    //         });
    //         let newData = [newStructure];
    //         console.log("newStructure", newData);
    //         let indicator = [
    //           { name: "砖木", max: 300 },
    //           { name: "砖混", max: 400 },
    //           { name: "框架", max: 100 },
    //           { name: "钢结构", max: 55 },
    //           { name: "其他", max: 350 }
    //         ];
    //         let dataBJ = [[55, 9, 56, 0.46, 18, 6]];
    //         this.assetStructure = {
    //           title: {
    //             text: "资产结构"
    //           },
    //           radar: {
    //             indicator: structure
    //           },
    //           series: [
    //             {
    //               data: newData
    //             }
    //           ]
    //         };
    //         let start = (
    //           ((this.barCountData.date.length - 11) /
    //             this.barCountData.date.length) *
    //           100
    //         ).toFixed(2);
    //         this.barOptions = {
    //           dataZoom: [{ start: start }],
    //           xAxis: [{ data: propertybar.date }],
    //           legend: {
    //             data: [propertybar.data1.name]
    //           },
    //           series: [
    //             {
    //               name: propertybar.data1.name,
    //               data: propertybar.data1.value
    //             }
    //           ]
    //         };
    //       }
    //     )
    //   );
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$card-height: 100px;
$title-size: 30px;
* {
  touch-action: pan-y;
}
.chart-wrapper {
  position: relative;
}
.danwei {
  position: absolute;
  z-index: 100;
  font-size: 12px;
  right: 20px;
  outline: none;
  border: none;
}
.card-title {
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #dce0e4;
  text-align: center;

  .title_1 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .change {
    cursor: pointer;
  }
  .change:hover {
    color: #0f6cec;
    .title_2 {
      color: #0f6cec;
    }
    .title_4 {
      color: #0f6cec;
    }
  }
  .title_2 {
    font-size: $title-size;
    color: #34cdec;
  }
  .title_3 {
    font-size: $title-size;
    color: #666666;
  }
  .title_4 {
    font-size: $title-size;
    color: #ff9a54;
  }
  .title_5 {
    font-size: $title-size;
    color: #666666;
  }
  .card-title1 {
    background: url("../../../assets/blue.png");
    height: $card-height;
  }

  .card-title2 {
    background: url("../../../assets/purple.png");
    height: $card-height;
  }
  .card-title3 {
    background: url("../../../assets/orange.png");
    height: $card-height;
  }
  .card-title4 {
    background: url("../../../assets/deepblue.png");
    height: $card-height;
  }
}

.el-card {
  border: 0px;
}
.tools {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
// .title_1 {
//   font-size: 18px;
//   color: #34edec;
// }
// .title_2 {
//   font-size: 30px;
//   color: #34edec;
// }
</style>
